<template>
  <div class="analyze">
    <el-row class="m-3">
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-location">
              <i class="el-icon-s-shop card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">店铺数量</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.buildingsCount"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-sell">
              <i class="el-icon-s-custom card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">经纪人数量</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.agentCount"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-visit">
              <i class="el-icon-s-custom card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">总用户数</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.totalUserCount"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <i class="el-icon-office-building card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">总房源数量</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.houseInfoCount"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-location">
              <i class="el-icon-office-building card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">已租房源</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.rented"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-sell">
              <i class="el-icon-office-building card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">未租房源</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.notRented"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-visit">
              <i class="el-icon-office-building card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">已售房源</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.sold"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper icon-people">
              <i class="el-icon-office-building card-panel-icon"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">未售房源</div>
              <count-to
                :start-val="0"
                :end-val="dataMap.notSold"
                class="card-panel-num"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import CountTo from "vue-count-to";

export default {
  name: "Analysis",
  components: {
    CountTo,
  },
  data() {
    const rankList = [];
    for (let i = 0; i < 7; i++) {
      rankList.push({
        name: "白鹭岛 " + (i + 1) + " 号店",
        total: 1234.56 - i * 100,
      });
    }
    return {
      dataMap: [],
      tabs: {
        name: "cellNum",
      },
      rankList,
      chart: {
        range: "",
      },
      // info: {
      //   ipVisit: {
      //     num: 2324,
      //     duration: 2600
      //   },
      //   timesVisit: {
      //     num: 1213,
      //     duration: 3000
      //   },
      //   totalVisit: {
      //     num: 1234,
      //     duration: 4000
      //   }
      // },
      // topCard: {
      //   cellNum: {
      //     num: 126560,
      //     duration: 3000
      //   },
      //   visitNum: {
      //     num: 8846,
      //     duration: 3000
      //   },
      //   payCount: {
      //     num: 6560,
      //     duration: 3000
      //   },
      //   operateEffect: {
      //     num: 78,
      //     duration: 3000
      //   }
      // },
      data: {
        rows: [],
        columns: [],
      },
      series: {
        type: "bar",
        barWidth: 50,
        barGap: "50%",
        itemStyle: {
          normal: {
            color: (params) => {
              let colorList = [
                "#C33531",
                "#EFE42A",
                "#64BD3D",
                "#EE9201",
                "#29AAE3",
                "#B74AE5",
                "#0AAF9F",
                "#E89589",
                "#16A085",
                "#4A235A",
                "#C39BD3 ",
                "#F9E79F",
                "#BA4A00",
                "#ECF0F1",
                "#616A6B",
                "#EAF2F8",
                "#4A235A",
                "#3498DB",
              ];
              return colorList[params.dataIndex];
            },
          },
        },
      },
      call: "",
    };
  },
  activated() {
    this.data.columns = ["日期", "销量"];
    this.data.rows = [];
    // for (let i = 0; i < 12; i += 1) {
    //   this.data.rows.push({
    //     日期: `${i + 1}月`,
    //     销量: Math.floor(Math.random() * 1000) + 200
    //   });
    // }
  },
  watch: {
    "tabs.name"(val) {
      if (val === "visitNum") {
        this.$nextTick((_) => {
          this.$refs.visitNum.resize();
        });
      }
    },
  },
  methods: {
    initValue() {
      // let { ipVisit, timesVisit, totalVisit } = this.info;
      // this.info = {
      //   ...this.info,
      //   ipVisit: {
      //     ...ipVisit,
      //     num: 0
      //   },
      //   timesVisit: {
      //     ...timesVisit,
      //     num: 0
      //   },
      //   totalVisit: {
      //     ...totalVisit,
      //     num: 0
      //   }
      // };
    },
    initTopCardValue() {
      // let { cellNum, visitNum, payCount, operateEffect } = this.topCard;
      // this.topCard = {
      //   cellNum: {
      //     ...cellNum,
      //     num: 232
      //   },
      //   visitNum: {
      //     ...visitNum,
      //     num: 123
      //   },
      //   payCount: {
      //     ...payCount,
      //     num: 3543
      //   },
      //   operateEffect: {
      //     ...operateEffect,
      //     num: 1234
      //   }
      // };
    },
    getStatistics() {
      this.$http({
        url: "/ht/attach/getStatistics",
        method: "get",
        params: {},
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataMap = data.map;
        }
      });
    },
    getVisitNum() {
      // this.$refs.visitNum.initCellNumCharts();
    },
    getCellNum() {
      // this.$refs.cellNum.initCellNumCharts();
    },
    getTopCardInfo() {
      this.initTopCardValue();
      // this.$nextTick(() => {
      //   this.topCard = {
      //     cellNum: {
      //       num: 126560,
      //       duration: 3000
      //     },
      //     visitNum: {
      //       num: 8846,
      //       duration: 3000
      //     },
      //     payCount: {
      //       num: 6560,
      //       duration: 3000
      //     },
      //     operateEffect: {
      //       num: 78,
      //       duration: 3000
      //     }
      //   };
      // });
    },
    getLoginInfo() {
      this.initValue();
    },
    cycleCall() {
      this.call = setInterval(() => {
        this.getTopCardInfo();
        // this.getCellNum();
        // this.getVisitNum();
      }, 8000);
    },
    stopCall() {
      clearInterval(this.call);
    },
  },
  mounted() {
    this.getStatistics();
    this.cycleCall();
    this.getTopCardInfo();
  },
  destroyed() {
    this.stopCall();
  },
};
</script>

<style scoped lang="less">
.analyze {
  .top-1 {
    top: 0.55rem;
  }
  .mt-0 {
    margin-top: 0;
  }

  .m-3 {
    margin-bottom: 0.75rem;
  }

  .right-0 {
    right: 200px;
  }
  .absolute {
    position: absolute;
  }
  .float-left {
    float: left;
  }
  .flex {
    display: flex;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #ffffff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-sell {
        background: #6778fa;
      }
      .icon-people {
        background: #40c9c6;
      }
      .icon-location {
        background: #36a3f7;
      }
      .icon-visit {
        background: #f4516c;
      }
    }
    .icon-sell {
      color: #6778fa;
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-location {
      color: #36a3f7;
    }
    .icon-visit {
      color: #f4516c;
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
</style>
